<!--
 * @Author: David Ma
 * @FilePath: \huaxia-real-estate-web\src\pages\messages\my-messages.vue
 * @LastEditors: David Ma
 * @Description: 该文件用于...
 * @Date: 2023-12-27 15:53:05
-->
<template>
  <!-- 修改邮件对话框 -->
  <v-dialog v-model="modifyDialog" max-width="35rem">
    <v-card>
      <v-card-title>修改邮件状态</v-card-title>
      <v-card-text>您确定要将该邮件设置为已读吗?</v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="modifyDialog = false">取消</v-btn>
        <v-btn @click="modifyMail()">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <VRow>
    <VCol cols="12">
      <VCard>
        <div class="d-flex justify-space-between align-center mt-4 mb-4">
          <VCardTitle>我的信箱</VCardTitle>
        </div>

        <VDivider />
        <VTable style="height: 40rem;" fixed-header>
          <thead>
            <tr>
              <th>邮件编号</th>
              <th>发件人</th>
              <th>发送时间</th>
              <th>内容</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="item in mails">
              <td>
                {{ item.mailNo }}
              </td>
              <td class="text-center">
                {{ item.info }}
              </td>
              <td class="text-center">
                {{ item.sendTime }}
              </td>
              <td class="text-center">
                {{ item.sendName }}
              </td>
              <td class="text-center">
                <VBtn
                  :color="item.mailStatus === '1' ? 'primary' : '#605e5c'"
                  @click="modifyMailStatus(item)"
                >
                  {{ item.mailStatus === "1" ? "已读" : "未读" }}
                </VBtn>
              </td>
            </tr>
          </tbody>
        </VTable>
      </VCard>
    </VCol>
  </VRow>
</template>
<script lang="ts" setup>
import {
Mail,
getAllMailByAcceptNo,
modifyMailStatusByMailNo,
} from "@/api/messages";
import { useUserStore } from "@/store";
import { Message } from "@arco-design/web-vue";
const userInfo = useUserStore();
//定义dialog
const modifyDialog = ref(false);
//定义mails
const mails = ref([]);
const mailNo = ref("");
onMounted(async () => {
  try {
    // 获取所有邮件
    const res = await getAllMailByAcceptNo(userInfo.userId);
    mails.value = res.data.data;
  } catch (err) {
    Message.error("获取数据失败");
  }
});
// 定义修改函数
const modifyMailStatus = async (item: Mail) => {
  //判断状态
  if (item.mailStatus === "1") {
    Message.warning("该邮件已经是已读状态");
    return;
  } else {
    //打开对话框
    modifyDialog.value = true;
    mailNo.value = item.mailNo;
  }
};
// 定义修改函数
const modifyMail = async () => {
  //修改状态
  const res = await modifyMailStatusByMailNo(mailNo.value);
  //判断是否成功并提示
  if (res.data.code === 200) {
    
    Message.success("修改成功");
    //刷新页面
    const res2 = await getAllMailByAcceptNo(userInfo.userId);
    mails.value = res2.data.data;
    //关闭对话框
    modifyDialog.value = false;
  } else {
    Message.error("修改失败");
  }
};


</script>
